<template id="tmp-character-class">
    <span :class="'c'+c">
        <span class="badge badge-dark" v-if="c==1"><img :src="'/images/class/class_warrior.gif'"> 战士</span>
        <span class="badge badge-dark" v-if="c==2"><img :src="'/images/class/class_paladin.gif'"> 圣骑士</span>
        <span class="badge badge-dark" v-if="c==3"><img :src="'/images/class/class_hunter.gif'"> 猎人</span>
        <span class="badge badge-dark" v-if="c==4"><img :src="'/images/class/class_rogue.gif'"> 潜行者</span>
        <span class="badge badge-dark" v-if="c==5"><img :src="'/images/class/class_priest.gif'"> 牧师</span>
        <span class="badge badge-dark" v-if="c==6"><img :src="'/images/class/class_deathknight.gif'"> 死亡骑士</span>
        <span class="badge badge-dark" v-if="c==7"><img :src="'/images/class/class_shaman.gif'"> 萨满</span>
        <span class="badge badge-dark" v-if="c==8"><img :src="'/images/class/class_mage.gif'"> 法师</span>
        <span class="badge badge-dark" v-if="c==9"><img :src="'/images/class/class_warlock.gif'"> 术士</span>
        <span class="badge badge-dark" v-if="c==11"><img :src="'/images/class/class_druid.gif'"> 德鲁伊</span>
    </span>
</template>
<script>
    Vue.component("component-character-class", {
        props:["c"],
        template:"#tmp-character-class",
    });
</script>
<style>
    .c1  span{ color: #C69B6D !important } /* Warrior */
    .c2  span{ color: #F48CBA !important } /* Paladin */
    .c3  span{ color: #AAD372 !important } /* Hunter */
    .c4  span{ color: #FFF468 !important } /* Rogue */
    .c5  span{ color: #FFFFFF !important } /* Priest */
    .c6  span{ color: #C41E3B !important } /* Death Knight */
    .c7  span{ color: #2359FF !important } /* Shaman */
    .c8  span{ color: #68CCEF !important } /* Mage */
    .c9  span{ color: #9382C9 !important } /* Warlock */
    .c11 span{ color: #FF7C0A !important } /* Druid */
</style>
